<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
	<title>剧本预约</title>
</head>
<link rel="stylesheet" type="text/css" href="css/public.css" />
<link rel="stylesheet" type="text/css" href="css/iconfont.css">
<script src="js/jquery1.42.min.js"></script>
<script src="js/TouchSlide.1.1.js"></script>
<script src="js/tool.js"></script>

<body>

	<!--<header >
		<div class="title"><a class="nav-btn" href="index.html"></a><span>话剧模板</span></div>
	</header>-->
	<!-- 本例主要代码 Start ================================ -->
	<!--<div id="bottomoTabBox" class="tabBox">-->
		<div class="view">
			<div class="indexpage">
				<!--店铺地址电话-->
				<div class="store-info">
					<h1>一起剧本杀</h1>
					<p> <i class="iconfont icon-dianhua1"></i>18888888888</p>
					<p> <i class="iconfont icon-location1"></i>吉林省吉林市吉林大街万达广场</p>
				</div>


				<!--书籍列表-->
				<div class="book-list-box clearfix">
					<a href="#" class="left">
						<div class="book-pic"></div>
						<div class="info">
							<p class="name">声声慢声声慢声声慢
							</p>
							<p class="pernum">
								<span class="iconfont icon-renshu">50</span>
								<span class="iconfont icon-renshu-">20</span>
							</p>
							<p class="time">
								<span>时间：</span>
								<span>14:00-16:00</span>
							</p>
							<p class="appint">
								<span class="prize">￥50</span>
								<span class="btn">预约</span>
							</p>
						</div>
					</a>

					<a href="#" class="right">
						<div class="book-pic second"></div>
						<div class="info">
							<p class="name">酒大奇迹酒大奇迹
							</p>
							<p class="pernum">
								<span class="iconfont icon-renshu">50</span>
								<span class="iconfont icon-renshu-">20</span>
							</p>
							<p class="time">
								<span>时间：</span>
								<span>14:00-16:00</span>
							</p>
							<p class="appint">
								<span class="prize">￥50</span>
								<span class="btn">预约</span>
							</p>
						</div>
					</a>

					<a href="#" class="left ">
						<div class="book-pic third"></div>
						<div class="info">
							<p class="name">酒大奇迹酒大奇迹
							</p>
							<p class="pernum">
								<span class="iconfont icon-renshu">50</span>
								<span class="iconfont icon-renshu-">20</span>
							</p>
							<p class="time">
								<span>时间：</span>
								<span>14:00-16:00</span>
							</p>
							<p class="appint">
								<span class="prize">￥50</span>
								<span class="btn">预约</span>
							</p>
						</div>
					</a>

					<a href="#" class="right">
						<div class="book-pic third"></div>
						<div class="info">
							<p class="name">酒大奇迹酒大奇迹
							</p>
							<p class="pernum">
								<span class="iconfont icon-renshu">50</span>
								<span class="iconfont icon-renshu-">20</span>
							</p>
							<p class="time">
								<span>时间：</span>
								<span>14:00-16:00</span>
							</p>
							<p class="appint">
								<span class="prize">￥50</span>
								<span class="btn">预约</span>
							</p>
						</div>
					</a>
					<a href="#" class="left">
						<div class="book-pic second"></div>
						<div class="info">
							<p class="name">酒大奇迹酒大奇迹
							</p>
							<p class="pernum">
								<span class="iconfont icon-renshu">50</span>
								<span class="iconfont icon-renshu-">20</span>
							</p>
							<p class="time">
								<span>时间：</span>
								<span>14:00-16:00</span>
							</p>
							<p class="appint">
								<span class="prize">￥50</span>
								<span class="btn">预约</span>
							</p>
						</div>
					</a>
				</div>
				<div style="height: 100px"></div>
			</div>

			<!--首页-->
			<!--<div class="indexpage">
				<div class="img-box">
					<a href="dramadetail.html" class="mainimg first">
						<div class="text bottom">
							<h2>话剧宣传</h2>
							<p>地址：XXXXXX</p>
							<p>电话：1XXXXXXXX</p>
						</div>
					</a>
				</div>



				<div class="img-box">
					<a href="#" class="minimg second">
					</a>
					<div class="text right">
						<h2>剧本简介</h2>
						<p>那是没有说再见</p>
						<p>是因为我以为不见</p>
						<p>才明白最美好的是</p>
					</div>
				</div>

				<div class="img-box">
					<a href="#" class="minimg">
					</a>
					<div class="text left">
						<h2>剧本简介</h2>
						<p>那是没有说再见</p>
						<p>是因为我以为不见</p>
						<p>才明白最美好的是</p>
					</div>
				</div>



			</div>-->

			<!--预约-->
			<div class="appointpage">
				<!--list-->
				<a class="appoint-wrap" href="appointdetail.html">
					<div class="appoint-img-wrap">
						<img src="img/ssm.png"/>
					</div>
					<div class="appoint-name-wrap">
						<div class="name-title">话剧--声声慢</div>
						<p class="name-summary ellipsis">北宋灭亡,丈夫去世,一连串的打击使她尝尽了国破家亡。</p>
					</div>

					<div class="appoint-extra-wrap">
						<div>
							<span class="selling-price">￥78.00</span>
							<span class="original-price">￥150.00</span>
							<span>已预约：39</span><span>剩余：63</span>
						</div>
						<button class="extra-btn">立即预约</button>
					</div>
					<i class="promotion-icon"></i>
				</a>


					<!--list-->
					<a class="appoint-wrap" href="appointdetail.html">
						<div class="appoint-img-wrap">
							<img src="img/drama7.jpg"/>
						</div>
						<div class="appoint-name-wrap">
							<div class="name-title">话剧——无风地带</div>
							<p class="name-summary ellipsis">《无风地带》以殖民统治时期的大连为历史背景。</p>
						</div>

						<div class="appoint-extra-wrap">
							<div>
								<span class="selling-price">￥78.00</span>
								<span class="original-price">￥150.00</span>
								<span>已预约：39</span><span>剩余：63</span>
							</div>
							<button class="extra-btn">立即预约</button>
						</div>
						<i class="promotion-icon"></i>
					</a>

		</div>

	    <!--我的-->
		<div class="mypage">
			<div class="user-detail">
				<div class="user-header">
					<div class="usericon-wrap">
						<span id="toUserName"></span>
					</div>
					<span class="username">请点击登录</span>
				</div>
			</div>
			<div class="container">
				<div class="info-wrap">
					<div class="info-detail-item">
						<div class="detail-title" id="allOrderBtn">所有订单</div>
						<div class="order-status-list">
							<a href="#" >
								<span class="tip-bubble" >1</span>
								<span class="status-icon wait-pay" style="background-color: rgb(51, 51, 51);"></span>
								<span>待支付</span>
							</a>
							<a href="#" >
								<span class="status-icon order-underway" style="background-color: rgb(51, 51, 51);"></span>
								<span>进行中</span>
								<span class="tip-bubble">22</span>
							</a>
							<a href="#" >
								<span class="status-icon order-complete" style="background-color: rgb(51, 51, 51);"></span>
								<span>已完成</span>
							</a>
							<a href="#" >
								<span class="status-icon order-cancel" style="background-color: rgb(51, 51, 51);"></span>
								<span>已取消</span>
							</a>
						</div>
					</div>

					<div class="info-detail-item">
						<div class="detail-title"><span class="tip-bubble red position-center" >22</span>最新消息</div>
						<div class="detail-title">我的订阅</div>
						<div class="detail-title">我的表单</div>
					</div>

					<div class="info-detail-item user-info">
						<div class="info-item address">
							<i class="item-icon address-icon"></i>
							<span class="item-text">xxx省xxx市xxx县xxx路xxx号</span>
							<span class="dist"></span>
							<i class="more-icon"></i>
						</div>
						<div class="info-item phone">
							<i class="item-icon phone-icon"></i>
							<span class="item-text">13800000000</span>
							<i class="more-icon"></i>
						</div>
						<div class="info-item companyTime">
						<i class="item-icon company-time-icon"></i>
							<span class="item-text">周一至周五 09:00-18:00</span>
						</div>
						<div class="info-item introduction">
							<i class="item-icon introduction-icon"></i>
							<span class="item-text">这是话剧宣传的预约类模板</span>
						</div>
					</div>
				</div>
			</div>

		</div>



		<div class="footer">
		    <a href="#" class="index  on"><span></span><span>首页</span></a></a>
			<a href="#" class="appoint"><span></span><span>预约</span></a>
			<a href="#" class="my"><span></span><span>我的</span></a></a>
		</div>
	<!--</div>-->

		<div class="float-telephone" id="floatTel">
			<span class="icon iconfont icon-dianhua1"></span>
		</div>

		<!--遮罩层 start-->
		<div class="fullscreen"></div>
		<div class="modal">
			<p>15688888888</p>
			<p class="cancel" id="cancel">取消</p>
		</div>
		<!--遮罩层 end-->


	<script>

		$(function(){

		    /*点击tab*/
		    $(".footer a").click(function(){
                $(".footer a").removeClass("on") ;
		        var newView = $(this).attr("class")+"page" ;
		        $("div[class$='page']").hide() ;
		        $("."+newView+"").show() ;

                $(this).addClass("on") ;
			}) ;

		    /*跳转到所有订单*/
            $("#allOrderBtn").click(function(){
                window.location.href = "allstatusorders.html" ;
			}) ;

            /*弹框显示*/
            $("#floatTel").click(function(){
                $(".fullscreen").fadeIn() ;
                $(".modal").fadeIn() ;
            }) ;

            /*弹框隐藏*/
            $("#cancel").click(function(){
                $(".fullscreen").fadeOut();
                $(".modal").fadeOut();
            })

			$("#toUserName").click(function(){
                window.location.href = "uerinfo.html" ;
			});

            /*预约*/
            $(".book-list-box a").click(function(){
				window.location.href = "appointdetail.html" ;
			})
		})
	</script>

	<!--<script type="text/javascript">TouchSlide({ slideCell:"#bottomoTabBox",titCell:".hd a" ,delayTime:0});</script>-->
</body>
</html>
